<template>
    <div class="navWrap">
        <li @click="handleHome" :class="store.$state.ActiveShow == 1 && 'active'">
            <img src="@/assets/home.svg" />

            <span>{{ $t(i18n.global.t('dashboard.Home')) }}</span>
        </li>
        <li @click="handDashBoard" :class="store.$state.ActiveShow == 2 && 'active'">
            <img src="@/assets/menu.svg" />

            <span>{{ $t(i18n.global.t('dashboard.Dashboard')) }}</span>
        </li>
        <li @click="handleIpo" :class="store.$state.ActiveShow == 3 && 'active'">
            <img src="@/assets/book.svg" />

            <span>{{ $t(i18n.global.t('dashboard.IPOReferenceData')) }}</span>
        </li>
    </div>
</template>

<!-- <script lang="ts">
export default {
    name: "XNav",
};
</script> -->

<script lang="ts" setup>
import i18n from '@/locales';
import { getCurrentInstance, ref } from 'vue';
import { ipoStore } from '@/stores/ipo';
const { proxy } = getCurrentInstance() as any;
const store = ipoStore();

const handleIpo = () => {
    store.setActiveShow(3);
    proxy.$router.push('/IPO');
};
const handleHome = () => {
    store.setActiveShow(1);
    store.setMobileActiveShow(1);
    proxy.$router.push('/home');
};
const handDashBoard = () => {
    store.setActiveShow(2);
    proxy.$router.push('/dashBoard');
};
</script>

<style lang="scss" scoped>
// .navWrap {
//     width: calc(81vw / var(--screen) * 280) ;
//     position: relative;

</style>

<style lang="scss" scoped>
.navWrap {
    > li {
        width: 100%;
        height:  calc(70vh / var(--height) * 56);
        border-radius: calc(81vw / var(--screen) * 10);
        margin-top:  calc(70vh / var(--height) * 10);
        margin-left: calc(81vw / var(--screen) * -10);
        display: flex;
        align-items: center;
        color: #2b4a60;
        cursor: pointer;
        font-size:  calc(70vh / var(--height) * 21);
        background-color: #fff;
         img {
            margin-left: calc(81vw / var(--screen) * 12);
            width: calc(81vw / var(--screen) * 30);
            height:  calc(70vh / var(--height) * 30);;
        }

        span {
            font-weight: 700;
            margin-left: calc(81vw / var(--screen) * 13);
        }
        &.active {
            background-color: #edf5ff;
        }
    }
    li:hover {
        // color: #4ca0fc;
        cursor: pointer;
        background-color: #edf5ff;
    }
}
@media (min-height: 1000px) {
    .navWrap {
    > li {
        height:  56px;
        border-radius:  10px;
        margin-top: 10px;
        font-size: 21px;
         img {
            height:  30px;
        }
       
    }
 
} 
}
</style>
